'use strict';
import React, { Component } from 'react';
import { BrowserRouter, Route, Link, Switch } from 'react-router-dom';
import { Menu } from 'antd';
import './component/common/common.less';
import Home from './component/home/index';
import About from './component/about/index.jsx';
import Article from './component/article/index.jsx';
import Ours from './component/ours/index.jsx';
import Concact from './component/concact/index.jsx';
import './index.less'
import '../asset/css/normalize.css'
import '../asset/less/part.less'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { current: 'home' };
    this.routerMap = [
      {
        key: 'home',
        path: '/'
      },{
        key: 'article',
        path: '/article'
      },{
        key: 'concact',
        path: '/concact'
      },{
        key: 'ours',
        path: '/ours'
      },{
        key: 'about',
        path: '/about'
      }
    ]
  }

  handleClick(e) {
    console.log('click ', e, this.state);
    this.setState({
      current: e.key
    });
  }
  //   <Menu style={{background: 'none', position: 'absolute', top: 0,left: 0,width: '100%',height: '46px', zIndex: '2'}} theme="dark" onClick={this.handleClick.bind(this)} selectedKeys={[this.state.current]} mode="horizontal">
  //   <Menu.Item key="home">
  //     <Link to="/">Home</Link>
  //   </Menu.Item>
  //   <Menu.Item key="article">
  //     <Link to="/article">article</Link>
  //   </Menu.Item>
  //   <Menu.Item key="concact">
  //     <Link to="/concact">concact</Link>
  //   </Menu.Item>
  //   <Menu.Item key="ours">
  //     <Link to="/ours">ours</Link>
  //   </Menu.Item>
  //   <Menu.Item key="about">
  //     <Link to="/about">About</Link>
  //   </Menu.Item>
  // </Menu>
  render() {
    console.log(this.routerMap)
    const routerMap = this.routerMap;
    return <BrowserRouter><div className="container">
      <span className="logo title fz-20 lh20">橘子来一颗</span>
      <ul className="container-nav">
        {
          routerMap.map( (v,k) => {
            return <li key={v.key} className={`'container-nav-'${v.key} poi` }>
              <Link to={v.path}>{v.key}</Link>
            </li>
          })
        }
      </ul>
      <Switch>
        <Route path="/about" component={About}/>
        <Route path="/article" component={Article}/>
        <Route path="/ours" component={Ours}/>
        <Route path="/concact" component={Concact}/>
        <Route path="/home" component={Home}/>
        <Route path="/" component={Home}/>
      </Switch>
    </div>
    </BrowserRouter>;
  }
}

export default App;
